<template>
  <div class="interface">
    <div class="content">
      <div class="pic">
        <div
          class="heaDer"
          :style="{
            'background-image': 'url(' + user.profile.backgroundUrl + ')',
          }"
        >
          <span
            class="iconfont icon-arrow-left-bold"
            @click="$router.push('/recommend')"
          ></span>
          <div class="dian">
            <span class="iconfont icon-dian" @click="logoutSwitchFun(true)"></span>
          </div>
          <div class="Logout" v-if ="logoutSwitch">
              <dl>
                <dt>{{user.profile.nickname}}</dt>
                <dd @click="logoutSwitchFun(false)">
                    <span class="iconfont icon-user"></span>个人中心
                </dd>
                <dd @click="logoutStaFun">
                    <span class="iconfont icon-tuichudenglu" ></span>退出登录
                </dd>
              </dl>
          </div>
        </div>
      </div>
      <div class="profile">
        <div class="img">
          <img :src="user.profile.avatarUrl" alt="" />
        </div>
        <div class="user">
          <dl>
            <dt>{{ user.profile.nickname }}</dt>
            <dd>
              <span class="gz">{{ user.profile.follows }}关注</span>
            </dd>
            <dd>
              <span class="fs">{{ user.profile.followeds }}粉丝</span>
            </dd>
            <dd>
              <span class="Lv">Lv.{{ user.level }}</span>
            </dd>
          </dl>
          <p class="signature" v-show="user.profile.signature">
            个人介绍：{{ user.profile.signature }}
          </p>
        </div>
      </div>
      <div class="remLists">
        <div class="title">
          <router-link to="/userInfo/like" tag="span">喜欢歌单 </router-link>|
          <router-link to="/userInfo/establish" tag="span"
            >创建歌单 </router-link
          >|
          <router-link to="/userInfo/collection" tag="span"
            >收藏歌单</router-link
          >
        </div>
        <router-view></router-view>
        <!-- <div class="content">
          <ul class="clearfix">
            <li v-for="(item,index) in usermusicLists.playlist" :key="index" @click="goMusiclist(item.id)">
              <img :src="item.coverImgUrl" alt="" />
              <div>
                <a class="iconfont icon-monitor"></a>
                <span class="remd_lnum">{{item.playCount|playCountA}}</span>                
              </div>
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getUserDetail, getUserPlaylist,getUserlogout } from "../../api/userinfo"; //getUserPlaylist,
import{Notify}from'vant';
export default {
  data() {
    return {
      user: {
        profile: {
          avatarUrl: "",
          backgroundUrl: "",
        },
      },
      usermusicLists: "",
      logoutSwitch:false
    };
  },
  methods: {
    getUserDetailFun() {
      console.log(this.userId);
      getUserDetail({ uid: this.userId })
        .then((data) => {
          console.log(data);
          if (data.code == 200) {
            this.user = data;
          }
          return this.userId;
        })
        .then((data) => {
          getUserPlaylist({ uid: data, limit: 10 }).then((data) => {
            console.log(data);
            this.usermusicLists = data;
          });
        })
    },
    logoutStaFun(){
          getUserlogout({}).then(data=>{
            console.log("退出登录",data);
            Notify({ type: 'success', message: '退出登录' });
          })
          this.$store.commit("setLogin",false);
          this.$store.commit("clearId");
          this.$router.push("/recommend");
    },
    logoutSwitchFun(bol){
      this.logoutSwitch = bol
    }
  },
  computed: {
    userId() {
      return this.$store.state.userId;
    },
  },
  created() {
    this.getUserDetailFun();
  },
  filters: {
    playCountA(value) {
      if (value > 10000) {
        let w = value > 1000 ? value / 10000 : value; //万计算
        let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
        return y;
      } else {
        return value;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.interface {
  //   height: 100%;
  width: 100%;
  background-color: #b3c283;
  .content {
    // background-color: red;
    width: 100%;
    .pic {
      // background-color: red;
      text-indent: 0.5em;
      .heaDer {
        padding-top: 20px;
        // background-color: saddlebrown;
        background-size: 100%;
        background-repeat: no-repeat;
        height: 450px;
        span {
          font-size: 40px;
          color: #fff;
          margin-top: 20px;
        }
        .dian {
          float: right;
          margin: 0 20px 0 0;
          font-size: 30px;
        }
        .Logout{
          height: 100%;
          width: 100%;
          background-color: RGBA(63,68,47,.5);
          // opacity: .5;
          z-index: 9999;
          position: fixed;
          bottom: 0;
          left: 0;
          // text-align: center;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          border: 1px solid #ccc;
          dl{
            // width: 640px;
            width: 100%;
            max-height: 350px;
            // line-height: 81px;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #b3c283;
            opacity: 1;
            dt{
            height: 81px;
            line-height: 81px;
            text-indent: 1em;
            border-bottom: 1px solid #ccc;
            color: #FAFAFA;
            font-size: 24px;
          }
          dd{
            height: 92px;
            line-height: 92px;
            text-indent: 1em;
            font-size: 24px;
            vertical-align: middle; 
            color: #FAFAFA;
            span{
              margin-right: 20px;
            }
          }
          }

        }
      }
    }
    .profile {
      width: 590px;
      height: 195px;
      background-color: #b9cc7c;
      border-radius: 20px;
      position: relative;
      left: 50%;
      margin-left: -295px;
      top: -25px;
      .img {
        height: 130px;
        width: 130px;
        // border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin-left: -65px;
        top: -65px;
        overflow: hidden;
        img {
          // width: 100%;
          height: 100%;
        }
      }
      .user {
        text-align: center;
        padding: 75px 0 0 0;
        color: black;
        dt {
          font-size: 37px;
          // font-weight: normal;
        }
        dd {
          display: inline-block;
          margin-right: 25px;
          font-size: 20px;
          color: #fff;
        }
        .signature {
          color: #777777;
          font-size: 20px;
          text-align: center;
          height: 50px;
          line-height: 50px;
        }
      }
    }
    .remLists {
      // margin-left: 25px;
      .title {
        font-size: 0.34375rem;
        height: 100px;
        line-height: 100px;
        font-weight: bold;
        text-indent: 0.5em;
        color: #fff;
        span{
            &.router-link-active{
              // background-color: black;
              // border-bottom:2px solid #fff;
              color: #ccc;
            }          

        }

      }
      // .content{
      //     position: fixed;
      //     top: 456px;
      // }
    }
  }
}
</style>